<template>
	<f-popup ref="popup" position="bottom" :canCloseByShade="false">
		<view class="content">
			<view class="title flex align-center">
				<view class="logo">
					<image class="icon" src="../../static/logo-img.png" mode="widthFix"></image>
				</view>
				<view class="mini-name">贝贝享飞无人机租赁 申请</view>
			</view>

			<view class="tips">
				<view class="tip">获取你的昵称、头像</view>
				<view class="use-for">用于个人中心以及分享时展示</view>
			</view>

			<form @submit="saveUserInfo">
				<view class="info-item">
					<view class="label">头像</view>
					<view class="input-content more">
						<button class="reset-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<view class="choose-avatar before" v-if="!avatarUrl">
								<image src="../../static/avatar-icon.png" mode="widthFix"></image>
							</view>
							<image class="choose-avatar after" :src="avatarUrl" wx:else></image>
						</button>
					</view>
				</view>

				<view class="info-item">
					<view class="label">昵称</view>
					<input class="input-content more" v-model="nickName" type="nickname" placeholder="输入昵称"
						placeholder-class="placeholder-class" :always-embed="false"
						:adjust-position="true" :hold-keyboard="false" name="nickName"
						@touchstart="requirePrivacyAuthorize" @blur="handleBlur" @input="handleChange"></input>
				</view>

				<view class="buttons">
					<button class="cancel" form-type="reset" @click="rejects">拒绝</button>
					<button v-if="avatarUrl && nickName" class="save" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">保存</button>
					<button v-else class="save" @click="submit">保存</button>
				</view>

				<!--隐藏参数区域开始-->
				<input disabled style="display:none;" name="avatarUrl" :value="avatarUrl"></input>
				<!--隐藏参数区域结束-->
			</form>
		</view>
	</f-popup>
</template>

<script>
	import { upLoadServe } from '@/utils/uploadImg.js'
	
	export default {
		name: "authorize-popup",
		data() {
			return {
				avatarUrl: '',
				nickName: '',
			};
		},
		mounted() {
			uni.$on('show-authorize', (data) => {
				this.open()
			});
			uni.$on('hide-authorize', ()=> {
				this.close()
			});
		},
		methods: {
			// 获取头像
			onChooseAvatar(event) {
				this.avatarUrl = event.detail.avatarUrl
			},
			requirePrivacyAuthorize(event) {
				if (wx.requirePrivacyAuthorize) {
					wx.requirePrivacyAuthorize({
						success: res => {
							//用户同意隐私协议后给昵称输入框聚焦
							this.nickNameFocus = true
						},
						fail: res => {
							console.log('用户拒绝了隐私协议');
						}
					})
				} else {
					this.nickNameFocus = true
				}
			},
			handleBlur(event) {
				this.nickName = event.detail.value
			},
			handleChange(event) {
				this.nickName = event.detail.value
			},
			submit() {
				if (!this.avatarUrl) {
					uni.showToast({
						icon: 'none',
						title: '请选择头像'
					})
					return;
				}
				if (!this.nickName) {
					uni.showToast({
						icon: 'none',
						title: '请输入昵称'
					})
				}
			},
			// 获取手机号
			getPhoneNumber(event) {
				const params = {
					appid: this.$store.state.common.appid,
					code: event.detail.code
				}
				this.$api.wxPhoneLoginApi(params).then(res=> {
					this.$store.commit('login/SET_TOKEN', res.data.access_token)
					this.$store.commit('login/SET_USER_INFO', res.data)
					upLoadServe([this.avatarUrl], 'avatar', (urlList)=> {
						this.avatarUrl = urlList[0].url
						this.saveUserInfo()
					})
				}).catch(err=> {
					console.log('err', err)
				})
			},
			// 保存用户信息
			async saveUserInfo(event) {
				const { code } = await wx.login()
				const params = {
					appid: this.$store.state.common.appid,
					code,
					name: this.nickName, 
					avatar: this.avatarUrl
				}
				this.$api.bindWxUserApi(params).then(res=> {
					uni.showToast({
						title: '登录成功'
					})
					this.close()
					this.$emit('success')
				}).catch(err=> {
					console.log('err', err);
				})
			},
			// 拒绝
			rejects() {
				this.$emit('rejects');
				this.close()
			},
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.avatarUrl = ''
				this.nickName = ''
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 50rpx;
		background-color: #FFFFFF;
		border-radius: 32rpx 32rpx 0 0;

		button {
			margin: 0;
			padding: 0;
			border: none;
			outline: none;
			background-color: transparent;

			&::after {
				border: none;
			}
		}


		.title {
			color: #161616;
			font-size: 32rpx;
			font-weight: 500;
			text-align: center;
			padding-bottom: 32rpx;

			.logo {
				margin-right: 12rpx;
				width: 46rpx;
				height: 46rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.icon {
				width: 46rpx;
				height: 46rpx;
				vertical-align: bottom;
				border-radius: 50%;
			}

			.mini-name {
				font-weight: 500;
			}
		}


		.tips {
			padding-bottom: 24rpx;

			.tip {
				color: #121212;
				font-size: 34rpx;
				font-weight: 500;
				margin-bottom: 12rpx;
			}

			.use-for {
				color: #606266;
				font-size: 28rpx;
				margin-bottom: 20rpx;
			}
		}

		.label {
			color: #404040;
			height: 100rpx;
			font-size: 32rpx;
			margin-right: 40rpx;
			display: flex;
			align-items: center;
		}

		.info-item {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #f0f0f0;
		}

		.input-content {
			position: relative;
			flex: 1;
			height: 100rpx;
			box-sizing: border-box;

			display: flex;
			align-items: center;
		}

		.reset-btn {
			width: 100%;
			display: flex;
			border-radius: 0;
			align-items: center;
		}

		.choose-avatar.before {
			background-color: #f0f0f0;
			width: 62rpx;
			height: 62rpx;
			padding: 8rpx;
			border-radius: 10rpx;
			box-sizing: border-box;

			display: flex;
			align-items: center;
			justify-content: center;
			
			image {
				width: 80%;
			}
		}

		.choose-avatar.before .icon-avatar {
			color: #FFFFFF;
			font-size: 34rpx;
		}

		.choose-avatar.after {
			width: 62rpx;
			height: 62rpx;
			border-radius: 10rpx;
		}

		.more:after {
			content: " ";
			transform: rotate(45deg);
			height: 14rpx;
			width: 14rpx;
			border-width: 2rpx 2rpx 0 0;
			border-color: #b2b2b2;
			border-style: solid;
			position: absolute;
			margin-top: -8rpx;
			right: 4rpx;
			top: 50%;
			transition: transform .3s;
		}


		.buttons {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 32rpx;
			padding-top: 42rpx;

			button {
				width: 220rpx;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 14rpx;
				font-size: 32rpx;
				font-weight: 500;
			}

			.save {
				color: #FFFFFF;
				background-color: #07c160;
			}

			.cancel {
				color: #07c160;
				background-color: #F2F2F2;
			}
		}

	}
</style>